<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <title>小票打印</title>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.qrcode.min.js"></script>
    <script src="/static/js/LodopFuncs.js"></script>
    <object id="LODOP_OB" classid="clsid:2105C259-1E0C-4534-8141-A753534CB4CA" width=0 height=0>
        <embed id="LODOP_EM" type="application/x-print-lodop" width=0 height=0 pluginspage="install_lodop32.exe"></embed>
    </object>
    <style type="text/css">

        .left{
            float: left;
        }
        .right{
            float:right;
        }
        .clearfix{
            clear: both;
        }
        ul{list-style: none;}
        .print_container{
            width: 200px;
        }
        .section1{
        }
        .section2 label{
            display: block;
        }
        .section3 label{
            display: block;
        }
        .section4{
        }
        .section4 .total label{
            display: block;
        }
        .section4 .other_fee{
            border-bottom: 1px solid #DADADA;
        }
        .section5 label{
            display: block;
        }
    </style>
</head>
<body style="background-color:#fff;" >
<div class="print_container" id="form1" >
    <h3>{$title}</h3>
    <span>********************************</span>
    <div class="section2">
        <label>订单备注：{$orders.remark}</label>
    </div>
    <span>********************************</span>
    <div class="section3">
        <input type="hidden"  id="number" value="{$orders.order_number}">
        <label>订单编号：{$orders.order_number}</label>
        <br>
        <label>订单时间：{$orders.time}</label>
    </div>
    <span>********************************</span>
    <div class="section4">
        <div style="border-bottom: 1px solid #DADADA;">

            <table style="width: 100%;">
                <thead>
                <tr>
                    <td width="60%">商品名称</td>
                    <td width="20%">数量</td>
                    <td width="20%">金额</td>
                </tr>
                </thead>
                <tbody>
                {volist name="goods" id="v"}
                <tr>
                    <td>{$v.name}</td>
                    <td>{$v.num}</td>
                    <td>{$v.price * $v.num}</td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>

        <div class="total">
            <label class="left">总计</label>
            <label class="right">￥{$orders.total_price}</label>
            <div class="clearfix"></div>
        </div>
        <div style="text-align: right;">
            <label id="f"></label>
        </div>
        <span>********************************</span>
    </div>
    <div class="section5">
        <label>姓名：{$user.name}</label>
        <br>
        <label>电话：{$user.phone}</label>
    </div>
    <span>********************************</span>
    <div id="code"></div>
    <img id="image" src="" />
</div>
<div>
    <lable>是否出发票</lable>
    <input type="radio" name="f" value="1" checked>是 &nbsp;
    <input type="radio" name="f" value="0">否 <br>
    <button id="btn" style="border-radius: 3%;width: 56px;padding: 3px;" onclick="tj({$orders.id})">打印</button>
</div>
<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        var number = $("#number").val();
        $("#code").qrcode({
            render: "canvas", //table方式
            width: 235, //宽度
            height:235, //高度
            text: number //任意内容
        });
    })
    function tj(id){
        var is_fp =  $("input[name='f']:checked").val();
        $.ajax({
            url: "../editOrder",
            data:{id:id,is_fp:is_fp},
            type:"post",
            success:function (res) {
                if (res.code){
                    var img = document.getElementById("image"); // get image element
                    var canvas  = document.getElementsByTagName("canvas")[0];  // get canvas element
                    var div = document.getElementById("code");
                    div.style.display = 'none';
                    img.src = canvas.toDataURL();
                    prn1_preview()
                }
            }

        })
    }
    var LODOP; //声明为全局变量
    function prn1_preview() {
        var fp =  $("input[name='f']:checked").val();
        if (fp ==1){
            $("#f").html("已开发票&nbsp;&nbsp;&nbsp;")
        }else{
            $("#f").html("未开发票&nbsp;&nbsp;&nbsp;")
        }

        CreateOneFormPage();
        LODOP.PREVIEW(); // 打印预览
        // LODOP.PRINT(); // 直接打印
    };
    function CreateOneFormPage(){
        LODOP=getLodop();
        LODOP.PRINT_INIT(); // 打印初始化
        LODOP.SET_PRINT_STYLE("FontSize",15); // 设置打印字体
        LODOP.SET_PRINT_STYLE("Bold",1);      // 设置加粗
        LODOP.SET_PRINT_PAGESIZE(3,800,45,"");  // 设置纸张大小
        LODOP.SET_PRINT_MODE("PRINT_PAGE_PERCENT",'90%'); // 设置打印缩放
        LODOP.ADD_PRINT_HTM(5,20,'100%','100%',document.getElementById("form1").innerHTML); // 设置打印内容
    };

</script>
</body>
</html>